<template xmlns="http://www.w3.org/1999/html">
    <div class="sea-page-column">
        <sea-grid col="4" class="box">
            <div class="sea-small-box bg-aqua">
                <div class="sea-small-box-inner">
                    <h3>150</h3>
                    <p>New Order</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-cart"></i>
                </div>
                <a href="#" class="sea-small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>

            <div class="sea-small-box bg-green">
                <div class="sea-small-box-inner">
                    <h3>53<sup style="font-size: 20px">%</sup></h3>
                    <p>Bounce Rate</p>
                </div>
                <div class="icon">
                    <i class="fa fa-line-chart"></i>
                </div>
                <a href="#" class="sea-small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>

            <div class="sea-small-box bg-orange">
                <div class="sea-small-box-inner">
                    <h3>67</h3>
                    <p>User Registrations</p>
                </div>
                <div class="icon">
                    <i class="fa fa-user-plus"></i>
                </div>
                <a href="#" class="sea-small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>

            <div class="sea-small-box bg-red">
                <div class="sea-small-box-inner">
                    <h3>33</h3>
                    <p>Unique Visitors</p>
                </div>
                <div class="icon">
                    <i class="fa fa-pie-chart"></i>
                </div>
                <a href="#" class="sea-small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
            </div>
        </sea-grid>

        <sea-grid col="3" class="box">
            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4><i class="fa fa-fw fa-text-width"></i>Headlines</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <h1>h1. Bootstrap heading</h1>

                    <h2>h2. Bootstrap heading</h2>

                    <h3>h3. Bootstrap heading</h3>
                    <h4>h4. Bootstrap heading</h4>
                    <h5>h5. Bootstrap heading</h5>
                    <h6>h6. Bootstrap heading</h6>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->

            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4><i class="fa fa-fw fa-text-width "></i>Text Emphasis</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <article>
                        <p class="lead">Lead to emphasize importance</p>

                        <p class="text-green">Text green to emphasize success</p>

                        <p class="text-aqua">Text aqua to emphasize info</p>

                        <p class="text-light-blue">Text light blue to emphasize info (2)</p>

                        <p class="text-red">Text red to emphasize danger</p>

                        <p class="text-yellow">Text yellow to emphasize warning</p>

                        <p class="text-maroon">Text maroon to emphasize general</p>
                    </article>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title"><i class="fa fa-fw fa-text-width"></i>Unordered List</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <ul>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Facilisis in pretium nisl aliquet</li>
                        <li>Nulla volutpat aliquam velit
                            <ul>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                                <li>Ac tristique libero volutpat at</li>
                            </ul>
                        </li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ul>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->
        </sea-grid>

        <sea-grid col="2" class="box">
            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title"><i class="fa fa-fw fa-text-width"></i>Ordered Lists</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <ol>
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Facilisis in pretium nisl aliquet</li>
                        <li>Nulla volutpat aliquam velit
                            <ol>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                                <li>Ac tristique libero volutpat at</li>
                            </ol>
                        </li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ol>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title"><i class="fa fa-fw fa-text-width"></i>Unstyled List</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <ul class="disabled-list-style">
                        <li>Lorem ipsum dolor sit amet</li>
                        <li>Consectetur adipiscing elit</li>
                        <li>Integer molestie lorem at massa</li>
                        <li>Facilisis in pretium nisl aliquet</li>
                        <li>Nulla volutpat aliquam velit
                            <ul>
                                <li>Phasellus iaculis neque</li>
                                <li>Purus sodales ultricies</li>
                                <li>Vestibulum laoreet porttitor sem</li>
                                <li>Ac tristique libero volutpat at</li>
                            </ul>
                        </li>
                        <li>Faucibus porta lacus fringilla vel</li>
                        <li>Aenean sit amet erat nunc</li>
                        <li>Eget porttitor lorem</li>
                    </ul>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title"><i class="fa fa-fw fa-text-width"></i>Description</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <dl>
                        <dt>Description lists</dt>
                        <dd>A description list is perfect for defining terms.</dd>
                        <dt>Euismod</dt>
                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                        <dt>Malesuada porta</dt>
                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                    </dl>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title"><i class="fa fa-fw fa-text-width"></i>Description Horizontal</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <dl class="dl-horizontal">
                        <dt>Description lists</dt>
                        <dd>A description list is perfect for defining terms.</dd>
                        <dt>Euismod</dt>
                        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                        <dt>Malesuada porta</dt>
                        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                        <dt>Felis euismod semper eget lacinia</dt>
                        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
                            massa
                            justo
                            sit amet risus.
                        </dd>
                    </dl>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title">text-block</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <span class="text-block active">text-block</span>
                    <span class="text-block">text-block</span>
                    <span class="text-block">text-block</span>
                    <span class="text-block">text-block</span>
                    <span class="text-block border-bottom">text-block</span>

                    <div class="text-block flex-row-gap">
                        <span class="badge bg-info">11</span>
                        <span class="badge bg-primary">12</span>
                        <span class="badge bg-success">13</span>
                        <span class="badge bg-warning">14</span>
                        <span class="badge bg-danger">15</span>
                    </div>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title">text-block</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body bg-light-blue">
                    <span class="text-block active">text-block</span>
                    <span class="text-block">text-block</span>
                    <span class="text-block">text-block</span>
                    <span class="text-block">text-block</span>
                    <span class="text-block border-bottom">text-block</span>

                    <div class="text-block flex-row-gap">
                        <span class="badge bg-info">11</span>
                        <span class="badge bg-primary">12</span>
                        <span class="badge bg-success">13</span>
                        <span class="badge bg-warning">14</span>
                        <span class="badge bg-danger">15</span>
                    </div>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title">Block Quotes</h4>
                    <span>边框、前景色与背景色，可以分开设置</span>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">

                    <blockquote class="blockquote-info fill-info text-black">blockquote-info</blockquote>
                    <blockquote class="blockquote-primary fill-primary">blockquote-primary</blockquote>
                    <blockquote class="blockquote-success fill-success">blockquote-success</blockquote>
                    <blockquote class="blockquote-warning fill-warning">blockquote-warning</blockquote>
                    <blockquote class="blockquote-danger fill-danger">blockquote-danger</blockquote>

                    <div class="flex-column-gap">
                        <blockquote class="pull-left blockquote-primary">blockquote-primary</blockquote>
                        <blockquote class="pull-left blockquote-danger">blockquote-danger</blockquote>
                        <blockquote class="pull-left blockquote-success">blockquote-success</blockquote>
                        <blockquote class="pull-left blockquote-info">blockquote-info</blockquote>
                    </div>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->

            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title">Block Quotes</h4>
                    <span>reverse</span>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <blockquote class="blockquote-reverse blockquote-info text-info">blockquote-info</blockquote>
                    <blockquote class="blockquote-reverse blockquote-primary text-primary">blockquote-primary
                    </blockquote>
                    <blockquote class="blockquote-reverse blockquote-danger text-danger">blockquote-danger</blockquote>
                    <blockquote class="blockquote-reverse blockquote-warning text-warning">blockquote-warning
                    </blockquote>
                    <blockquote class="blockquote-reverse blockquote-success text-success">blockquote-success
                    </blockquote>

                    <div class="flex-column-gap">
                        <blockquote class="blockquote-reverse pull-right blockquote-primary">blockquote-primary
                        </blockquote>
                        <blockquote class="blockquote-reverse pull-right blockquote-danger">blockquote-danger
                        </blockquote>
                        <blockquote class="blockquote-reverse pull-right blockquote-success">blockquote-success
                        </blockquote>
                        <blockquote class="blockquote-reverse pull-right blockquote-info">blockquote-info</blockquote>
                    </div>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title">Block Quotes</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <article>
                        <blockquote>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                                ante.</p>
                            <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                        </blockquote>
                        <blockquote class="blockquote-reverse">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
                                ante.</p>
                            <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                        </blockquote>
                    </article>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->


            <div class="flex-box box-primary">
                <div class="flex-header">
                    <h4 class="box-title">Block Text</h4>
                </div>
                <!-- /.flex-header -->
                <div class="flex-body">
                    <article>
                        <blockquote>
                            <p>强制：在写文章的时候，要正确表达内容结构，必须使用 p 标签</p>
                            <ul>
                                <li>想要换行，首选 div，如果仍然想要文本标签；</li>
                                <li>可以使用 p 标签，结合 no-margin 样式使用</li>
                                <li>也可以使用 span 标签，结合 .block 或者 .text-block 样式</li>
                                <li>个人推荐 p 标签，因为可以嵌套更多文本标签，后期代码升级更简单</li>
                            </ul>
                        </blockquote>
                        <span class="block bg-primary">样式如当前所示，独立一行，没有 margin、padding 等额外设计</span>
                    </article>
                </div>
                <!-- /.flex-body -->
            </div>
            <!-- /.box -->
        </sea-grid>
    </div>
</template>

<script>

export default {
    components: {},
    methods: {},
    data() {
        return {}
    }
}
</script>

<style lang="scss" scoped>
@use './sea-small-box.scss';
</style>